<template>
  <a-card style="margin-bottom: 15px;">
    <a-form layout="inline" @submit.prevent="onSubmit" :form="form" class="search-list">
      <a-form-item class="item" label="嘉宾姓名">
        <a-input v-decorator="['name', {initialValue: initialData.name || ''}]" placeholder="嘉宾名称"></a-input>
      </a-form-item>
      <div class="action-box">
        <a-button htmlType="submit" type="primary">搜索</a-button>
        <a-button>清空</a-button>
      </div>
    </a-form>
  </a-card>
</template>

<script>
export default {
  props: {
    payload: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    const { query } = this.$route
    return {
      form: this.$form.createForm(this),
      initialData: query
    }
  },
  methods: {
    onSubmit() {
      this.form.validateFields((err, values) => {
        console.log(values)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.search-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.item {
  margin: 10px;
  margin-left: 0;
}
</style>
